<template> 
    <el-card class="form-container" shadow="never">
      <el-form 
               label-width="150px"
               size="small">
        <el-form-item label="Nickname:">
          <el-input v-model="queryData.nickName" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="Date of birth:">
            <el-date-picker
               class="input-width"
               v-model="birthday"
               type="date"
               placeholder="Select Date">
         </el-date-picker>  
        </el-form-item>
        <el-form-item label="Gender:">
            <el-select v-model="queryData.gender" placeholder="Please enter" class="input-width">
              <el-option
                v-for="item in gender"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="Looking for:">
          <el-select v-model="queryData.lookingFor" placeholder="Please enter" class="input-width">
              <el-option
                v-for="item in lookingFor"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="Why you here">
            <el-select v-model="target" placeholder="Please enter" class="input-width">
            <el-option
                v-for="item in targetOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
             </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="Interests">
            <el-select v-model="interests" multiple :multiple-limit="8" placeholder="Please enter" class="input-width">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
             </el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="About me">
          <el-input
            class="input-width"
            type="textarea"
            :rows="5"
            placeholder="Enter"
            :maxlength="500"
            v-model="queryData.aboutMe">
          </el-input>
        </el-form-item>
        <el-form-item label="Tunrn-ons">
            <el-select v-model="tunrn" multiple placeholder="Please enter" class="input-width">
            <el-option
                v-for="item in tunrnOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
             </el-option>
           </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="onSubmit()">Submit</el-button>
          <el-button type="primary"  @click="onBack()">Back</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
  <script>
    import SingleUpload from '@/components/Upload/singleUpload'
    import {createHomeAdvertise, getHomeAdvertise, updateHomeAdvertise} from '@/api/homeAdvertise'
    import {fetchModelDetail,fetchModelModelfy} from '@/api/model';
    import {formatDate} from '@/utils/date';
    export default {
      name: 'HomeAdvertiseDetail',
      data() {
        return {
        listQuery:{
          modeUserCode:null
        },
        listLoading: false,
        queryData: {},
          gender:[{
          value:0,
          label: 'unknown'
        }, {
          value: 1,
          label: 'male'
        },{
          value: 2,
          label: 'female'
        }],
        birthday:"",
        lookingFor:[{
          value:0,
          label: 'unknown'
        }, {
          value: 1,
          label: 'male'
        },{
          value: 2,
          label: 'female'
        }],
        targetOptions:[
          {value:'Making new friends',
          label:'Making new friends'
          },
          {value:'Seeking a long-term partner',
          label:'Seeking a long-term partner'
          },
          {value:'Looking for a dating partner',
          label:'Looking for a dating partner'
          },
        ],
        tunrnOptions:[
        {
          value: 'Kisses',
          label: 'Kisses'
        },{
          value: 'Massage',
          label: 'Massage'
        },{
          value: 'Bondage',
          label: 'Bondage'
        },{
          value: 'Blingfolding',
          label: 'Blingfolding'
        },{
          value: 'Biting',
          label: 'Biting'
        },{
          value: 'Dirty Talk',
          label: 'Dirty Talk'
        },{
          value: 'Breakfast',
          label: 'Breakfast'
        },{
          value: 'Scent',
          label: 'Scent'
        },{
          value: 'Being watched',
          label: 'Being watched'
        },{
          value: 'Sexting',
          label: 'Sexting'
        },{
          value: 'Dress up',
          label: 'Dress up'
        },{
          value: 'BDSM',
          label: 'BDSM'
        },{
          value: 'Busbes',
          label: 'Busbes'
        },{
          value: 'Home Video',
          label: 'Home Video'
        },{
          value: 'Striptease',
          label: 'Striptease'
        },{
          value: "I'm a dom",
          label: "I'm a dom"
        },{
          value: "I'm a sub",
          label: "I'm a sub"
        },{
          value: 'Switch',
          label: 'Switch'
        },{
          value: 'Feet',
          label: 'Feet'
        },{
          value: 'Group Fun',
          label: 'Group Fun'
        },{
          value: 'Outdoors',
          label: 'Outdoors'
        },{
          value: 'Toys',
          label: 'Toys'
        },{
          value: 'Cuckold',
          label: 'Cuckold'
        },{
          value: 'Wax Play',
          label: 'Wax Play'
        }
        ],
        options:[
        {
          value: 'Traveling',
          label: 'Traveling'
        }, {
          value: 'Theater',
          label: 'Theater'
        }, {
          value: 'Reading',
          label: 'Reading'
        }, {
          value: 'Photography',
          label: 'Photography'
        },{
            value: 'Pets',
          label: 'Pets'  
        },{
            value: 'Parties',
          label: 'Parties'  
        },{
            value: 'Outdoor',
          label: 'Outdoor'  
        },{
            value: 'Music',
          label: 'Music'  
        },{
            value: 'Movies',
          label: 'Movies'  
        },{
            value: 'Games',
          label: 'Games'  
        },{
            value: 'Fitness',
          label: 'Fitness'  
        },{
            value: 'Exercise',
          label: 'Exercise'  
        },{
            value: 'Art',
          label: 'Art'  
        },{
            value: 'Adventure',
          label: 'Adventure'  
        } 
        ],
        interests:[],
        target:null,
        tunrn:[]
        }
      },
      created(){
        this.getModelDetail();
      },
      methods: {
        onSubmit() {
          var value = [];
          this.interests.forEach(element => {
            value.push({"interest":element});
           });
           var turnOnDtos = [];
          this.tunrn.forEach(element => {
            turnOnDtos.push({"turnOns":element});
           });
           const param = {
               "modeUserCode":this.queryData.userCode,
               "nickName":this.queryData.nickName,
               "gender":this.queryData.gender,
               "gender":this.queryData.gender,
               "lookingFor":this.queryData.lookingFor,
               "interests":value,
               "socialPurposes":this.target,
               "turnOnDtos":turnOnDtos,
               "aboutMe":this.queryData.aboutMe,
               "birthday":this.formatCreateTime(this.birthday),
           }
           fetchModelModelfy(param).then(response => {
            this.$message({
                message: 'Successfully modified',
                type: 'success',
                duration:1000
              });
             this.onBack();  
          });
        },
        onBack(){
          this.$router.go(-1);
        },
        formatCreateTime(time) {
          if (time!==null){
            let date = new Date(time);
            return formatDate(date, 'MM/dd/yyyy')
          }
        },
        resetForm(formName) {
         
        },
        getModelDetail() {
            let that = this;
            this.listLoading = true;
            const param = {
               "modeUserCode":this.$route.query.modelUserCode
           }
          fetchModelDetail(param).then(response => {
            that.listLoading = false;
            that.queryData = response.data;
            that.birthday = this.queryData.birthday;
            if(that.queryData.interests !== null && that.queryData.interests !== undefined){
              that.interests = this.queryData.interests;
            }
            if(that.queryData.socialPurposes !== null && that.queryData.socialPurposes !== undefined){
              that.target = that.queryData.socialPurposes;
            }
            if(that.queryData.turnOnDtos !== null && that.queryData.turnOnDtos !== undefined){
              for (let index = 0; index < that.queryData.turnOnDtos.length; index++) {
                   that.$set(that.tunrn,index,that.queryData.turnOnDtos[index].turnOns)
                  }
            }
          });
    },
      }
    }
  </script>
  <style scoped>
    .input-width {
      width: 70%;
    }
    .image{
        width:50px;
        height:50px;
    }
  </style>  